<svg (click)="goBack()" class="arrow" fill="currentColor" viewBox="0 0 24 24">
  <path
    d="M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12M18,11H10L13.5,7.5L12.08,6.08L6.16,12L12.08,17.92L13.5,16.5L10,13H18V11Z"
  />
</svg>
<div class="container px-5">
  <h2 class="mt-4 mb-4 text-center">Settings</h2>
  <div class="row align-items-center">
    <div class="col-4">
      <label [ngbTooltip]="'Where recorded livestreams will be saved'">Recording path</label>
    </div>
    <div class="col">
      <div class="d-flex align-items-center">
        <span class="selectable" *ngIf="!settings.recording_path" id="default-path"
          >~/Home/Videos</span
        >
        <span class="selectable" *ngIf="settings.recording_path">{{
          settings.recording_path
        }}</span>
        <button
          (click)="selectFolder()"
          class="btn btn-primary btn-sm ms-4 d-inline-flex align-items-center"
        >
          <span>Change</span>
          <svg fill="currentColor" class="ms-2 folder" viewBox="0 0 24 24">
            <path
              d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="row mt-3 align-items-center">
    <div class="col-4">
      <span
        [ngbTooltip]="
          'Launch parameters applied to all channels. Leave as-is if you don\'t know what this is'
        "
        >Global MPV Parameters</span
      >
    </div>
    <div class="col">
      <textarea
        #mpvParams
        id="mpvParams"
        [(ngModel)]="settings.mpv_params"
        placeholder="mpv params like: --hwdec auto. Don't touch this unless you know what you're doing!"
        class="form-control"
      ></textarea>
    </div>
  </div>

  <div class="row mt-3 align-items-center">
    <div class="col-4">
      <span>Default view</span>
    </div>
    <div class="col">
      <select
        (ngModelChange)="updateSettings()"
        [(ngModel)]="settings.default_view"
        class="form-control"
      >
        <option [ngValue]="viewModeEnum.All">All</option>
        <option [ngValue]="viewModeEnum.Categories">Categories</option>
        <option [ngValue]="viewModeEnum.Favorites">Favorites</option>
      </select>
    </div>
  </div>

  <div class="row mt-3 align-items-center">
    <div class="col-4">
      <span>Volume on start</span>
    </div>
    <div class="col d-inline-flex">
      <input
        type="range"
        style="flex-grow: 10; width: auto"
        step="1"
        class="form-range"
        min="0"
        max="100"
        [(ngModel)]="settings.volume"
        (ngModelChange)="updateSettings()"
      />
      <span style="flex-grow: 0.5" class="text-end">{{ settings.volume }}</span>
    </div>
  </div>

  <div class="row mt-3 align-items-center">
    <div class="col-4">
      <span>Re-stream port</span>
    </div>
    <div class="col">
      <input
        class="form-control"
        style="width: 10rem"
        type="number"
        [(ngModel)]="settings.restream_port"
      />
    </div>
  </div>

  <div class="row mt-3 align-items-center">
    <div class="col-4">
      <span
        [ngbTooltip]="
          'Depending on your provider/internet connection, using no caching would give you a lower latency and a more stable experience'
        "
        >Use stream caching</span
      >
    </div>
    <div class="col">
      <div class="form-check form-switch">
        <input
          [(ngModel)]="settings.use_stream_caching"
          (ngModelChange)="updateSettings()"
          class="form-check-input"
          type="checkbox"
        />
      </div>
    </div>
  </div>

  <div class="row mt-3 align-items-center">
    <div class="col-4">
      <span>Refresh all sources on start</span>
    </div>
    <div class="col">
      <div class="form-check form-switch">
        <input
          [(ngModel)]="settings.refresh_on_start"
          (ngModelChange)="updateSettings()"
          class="form-check-input"
          type="checkbox"
        />
      </div>
    </div>
  </div>

  <h2 class="mt-4 mb-4 text-center">Sources</h2>
  <ng-container *ngFor="let source of sources; let i = index">
    <div [ngClass]="{ 'mt-3': i != 0 }">
      <app-source-tile [source]="source"></app-source-tile>
    </div>
  </ng-container>

  <div class="mt-4 d-flex flex-wrap gap-3">
    <button
      [disabled]="memory.Loading"
      (click)="addSource()"
      class="btn btn-primary d-inline-flex align-items-center"
    >
      <span>Add source </span>
      <svg class="plus ms-1" fill="currentColor" viewBox="0 0 24 24">
        <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
      </svg>
    </button>
    <button
      [disabled]="memory.Loading"
      (click)="refreshAll()"
      class="btn btn-secondary d-inline-flex align-items-center"
    >
      Refresh all
      <svg class="refresh ms-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          fill="currentColor"
          d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"
        />
      </svg>
    </button>
    <button
      ngbTooltip="Use this if an upgrade didn't fix a bug you're experiencing"
      class="btn btn-danger d-inline-flex align-items-center"
      [disabled]="memory.Loading"
      (click)="nuke()"
    >
      Delete everything
      <svg class="nuke ms-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          fill="currentColor"
          d="M14.04,12H10V11H5.5A3.5,3.5 0 0,1 2,7.5A3.5,3.5 0 0,1 5.5,4C6.53,4 7.45,4.44 8.09,5.15C8.5,3.35 10.08,2 12,2C13.92,2 15.5,3.35 15.91,5.15C16.55,4.44 17.47,4 18.5,4A3.5,3.5 0 0,1 22,7.5A3.5,3.5 0 0,1 18.5,11H14.04V12M10,16.9V15.76H5V13.76H19V15.76H14.04V16.92L20,19.08C20.58,19.29 21,19.84 21,20.5A1.5,1.5 0 0,1 19.5,22H4.5A1.5,1.5 0 0,1 3,20.5C3,19.84 3.42,19.29 4,19.08L10,16.9Z"
        />
      </svg>
    </button>
  </div>
</div>

<div class="author mt-5 mb-4">
  <p>
    <a href="https://github.com/Fredolx/open-tv/discussions/69" target="_blank">
      Made by Frédéric Lachapelle with ❤️
      <br />Please consider donating to support future updates <br />Open TV is currently not
      sustainable and needs your support
    </a>
  </p>
</div>
